page{
  background: #F7F7F7;
}

.my-task{
  .van-tabs__line {
    background: linear-gradient(270deg, #B4D4FF 2%, #2F549F 100%);
    border-radius: 3rpx;
  }
  .van-tab--active{
    .van-ellipsis{
      color: #2F549F;
    }
  }
}

.my-task-content{
  min-height: calc(100vh - 88rpx);
  .content-type{
    padding: 24rpx 32rpx;
    display: flex;
    overflow-x: scroll;
    white-space: nowrap;
    &::-webkit-scrollbar{
      display: none;
      width: 0 !important;
      height: 0 !important;
      -webkit-appearance: none;
      background: transparent;
    }
    >.item{
      padding: 12rpx 24rpx;
      height: 56rpx;
      background: #FFFFFF;
      border-radius: 8rpx;
      font-size: 24rpx;
      color: #595959;
      line-height: 32rpx;
      margin-right: 16rpx;
    }
    >.active-item{
      background: #2F549F;
      color: #FFFFFF;
    }
  }

}

.content-list{
  padding: 0 32rpx;
  >.list-item{
    position: relative;
    background: #FFFFFF;
    border-radius: 8rpx;
    >.item-top{
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 32rpx;
      border-bottom: 2rpx dashed #F0F0F0;
      >view:first-child{
        width: 520rpx;
        position: relative;
        padding-left: 32rpx;
        font-size: 28rpx;
        color: #262626;
        line-height: 88rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        &::before{
          content: "";
          position: absolute;
          top:32rpx;
          left: 0;
          width: 6rpx;
          height: 24rpx;
          background: #2F549F;
        }
      }
      >view:last-child{
        font-size: 28rpx;
        color: #595959;
      }
    }
    >.item-bottom{
      height: 136rpx;
      padding: 26rpx 32rpx 26rpx 30rpx;

      display: flex;
      align-items: center;
      justify-content: space-between;
      >.item-bottom-left{
        display: flex;
        flex-wrap: wrap;
        >view{
          font-size: 24rpx;
          color: #8C8C8C;
          line-height: 28rpx;
          >image{
            display: inline-block;
            width: 28rpx;
            height: 28rpx;
            margin-left: 2rpx;
            margin-right: 8rpx;
            vertical-align:bottom;
          }
        }
        >.publish-img{
          >image{
            width: 32rpx;
            height: 28rpx;
            margin-left: 0;
            margin-right: 6rpx;
          }
        }
        >view:not(:nth-child(2n)){
          width: 250rpx;
        }
        >view:nth-child(-n+2){
          margin-bottom: 28rpx;
        }
      }
      >.item-bottom-right{
        font-size: 28rpx;
        color: #FF9934;
        font-weight: 600;
      }

    }
    >.right-fillet{
      position: absolute;
      top: 88rpx;
      right: -18rpx;
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
      background: #F7F7F7;
      transform: translateY(-50%);
    }
  }
  >.list-item:not(:last-child){
    margin-bottom: 24rpx;
  }
}
